<template>
	<div>
		<div style="display: flex; justify-content: center;">
			<div id="selectTypeDiv">
				<div :class="selectTypeIndex == 0 ? 'selectType btn' : 'btn'" @click="changeType(0)">应聘人员列表</div>
				<div :class="selectTypeIndex == 1 ? 'selectType btn' : 'btn'" @click="changeType(1)">招聘需求详情页</div>
			</div>
		</div>
		<div v-if="selectTypeIndex == 0">
			<div class="msgDiv">
				<div class="requirementPost">
					<!-- {{requirement.post}} -->
					</div>
				<div class="statusTypeBtnDiv">
					<div :class="statusType == 1 ? 'selectBtn' : ''" @click="statusType = 1; getWorkers()">待处理</div>
					<div :class="statusType == 2 ? 'selectBtn' : ''" @click="statusType = 2; getWorkers()">已录用</div>
					<div :class="statusType == 3 ? 'selectBtn' : ''" @click="statusType = 3; getWorkers()">已拒绝</div>
				</div>
				<el-table
						:data="workers"
						style="width: 100%"
						:border="true"
						:header-cell-style="{background:'#eef1f6', color:'#666666'}">
					<el-table-column
							prop="post"
							label="招聘岗位"
							show-overflow-tooltip
							:resizable="false">
					</el-table-column>
					<el-table-column
							prop="workerName"
							label="投递人姓名"
							width="140"
							:resizable="false">
					</el-table-column>
					<el-table-column
							prop="createTime"
							label="投递时间"
							width="155"
							:resizable="false">
					</el-table-column>
					<!-- <el-table-column
							prop="expectSalary"
							label="薪资区间（元）"
							width="140"
							:resizable="false">
					</el-table-column> -->
					<el-table-column
							label="状态"
							width="70"
							:resizable="false">
						<template slot-scope="scope">
							<span :style="'color: ' + formantStatus(scope.row.status).color">{{formantStatus(scope.row.status).label}}</span>
						</template>
					</el-table-column>
					<el-table-column
							label="操作"
							width="120"
							:resizable="false">
						<template slot-scope="scope">
							<span class="rowBtn" @click="gotoDetail(scope.row.id)">查看</span>
							<span class="rowBtn" @click="confirmWorkerPass(scope.row)" v-if="scope.row.status == 1 || scope.row.status == 4">录用</span>
							<span class="rowBtn" @click="confirmWorkerReject(scope.row)" v-if="scope.row.status == 1 || scope.row.status == 4" style="color: #d00000">拒绝</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div id="pageDiv">
				<div id="policyPagination" v-if="total > 0">
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageNum"
							:page-sizes="[10, 20, 30, 50]"
							:page-size="pageSize" background
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<div v-if="selectTypeIndex == 1">
			<!-- <div class="titleDiv">
				<div style="margin-bottom: 5px">劳务帮扶原因</div>
			</div> -->
			<!-- <div class="tableDiv">
				<div class="rowDiv">
					<div class="keyDiv">劳务帮扶名称</div>
					<div class="valueDiv">{{requirement.name}}</div>
				</div>
				<div class="rowDiv">
					<div class="keyDiv">劳务帮扶时间期限</div>
					<div class="valueDiv">{{requirement.beginDate + ' 至 ' + requirement.endDate}}</div>
				</div>
			</div> -->
			<div class="titleDiv">
				<!-- <div style="margin-bottom: 5px">招工帮扶需求</div> -->
			</div>
			<div class="tableDiv">
				<div class="rowDiv">
					<div class="keyDiv">标题</div>
					<div class="valueDiv">{{requirement.name}}</div>
					<div class="keyDiv">申请期限</div>
					<div class="valueDiv">{{requirement.beginDate + ' 至 ' + requirement.endDate}}</div>
				</div>
				<div class="rowDiv">
					<div class="keyDiv">招聘岗位</div>
					<div class="valueDiv">{{requirement.post}}</div>
					<div class="keyDiv">岗位薪资</div>
					<div class="valueDiv">{{requirement.salaryName}}</div>
				</div>
				<div class="rowDiv">
					<div class="keyDiv">招聘人数</div>
					<div class="valueDiv">{{requirement.amount}}人</div>
					<div class="keyDiv">经验要求</div>
					<div class="valueDiv">{{requirement.experienceName}}</div>
				</div>
				<div class="rowDiv">
					<div class="keyDiv">学历要求</div>
					<div class="valueDiv">{{requirement.educationName}}</div>
					<div class="keyDiv">工作类型</div>
					<div class="valueDiv">{{requirement.typeName}}</div>
				</div>
				<div class="rowDiv">
					<div class="keyDiv">技能要求</div>
					<div class="valueDiv">{{requirement.postDesc}}</div>
					<div class="keyDiv">工作地点</div>
					<div class="valueDiv">{{requirement.address.replaceAll('/', '')}}</div>
				</div>
				<div class="rowDiv">
					<div class="keyDiv">工作内容</div>
					<div class="valueDiv">{{requirement.responsibility}}</div>
				</div>
				<!-- <div class="rowDiv" style="border-bottom: 0">
					<div class="keyDiv">岗位要求</div>
					<div class="valueDiv">{{requirement.requirement}}</div>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import config from '@/utils/config'
	import {request} from "@/utils/request"

	export default {
		name: "companyRecruitWorkerList",
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				selectTypeIndex: 0,
				statusType: 1,
				crumbs: [ {
					label: '企业空间', value: 'company'
				}, {
					label: '人才服务', value: ''
				}, {
					label: '我的招聘', value: 'companyMyRecruit'
				}, {
					label: '应聘人员', value: 'companyRecruitWorkerList', choose: true
				}],
				requirement: {},
				workers: [],
				statusList: [{
					value: 1, label: '待查看', color: '#606266'
				}, {
					value: 2, label: '已通过', color: '#10a217'
				}, {
					value: 3, label: '未通过', color: '#d00000'
				}, {
					value: 4, label: '已查看', color: '#10a217'
				}]
			}
		},
		methods: {
			changeType(index){
				this.selectTypeIndex = index
				let label = ''
				this.selectTypeIndex == 0 ? label = '应聘人员' : label = '招聘需求详情页'
				this.crumbs[3].label = label
			},
			/**
			 * 改变页面大小事件
			 */
			handleSizeChange: function(e) {
				let ns = this
				ns.pageSize = e
				ns.getWorkers()
			},
			/**
			 * 换页事件
			 */
			handleCurrentChange: function(e) {
				let ns = this
				ns.pageNum = e
				ns.getWorkers()
			},
			/**
			 * 返回上一页
			 */
			goBack: function() {
				let ns = this
				ns.$router.go(-1)
			},
			// 查看详情
			gotoDetail(id){
				this.$router.push({name: 'companyRecruitWorkerDetail', query: {id: id, statusType: this.statusType}});
			},
			/**
			 * 获取用工需求信息
			 * @return {Promise<void>}
			 */
			async getRequirement() {
				let ns = this
				let {code, msg, data} = await request(ns, config.api.mineCompanyhelpRequirementDetailId + ns.$route.query.id)
				ns.requirement = data
			},
			/**
			 * 获取招聘人员信息
			 */
			async getWorkers() {
				let ns = this
				let params = {
					pageNum: ns.pageNum,
					pageSize: ns.pageSize,
					requirementId: ns.$route.query.id,
					status: ns.statusType
				}
				let {code, msg, rows, total} = await request(ns, config.api.mineCompanyhelpRequirementWorkerList, params)
				ns.workers = rows
				ns.total = total
			},
			/**
			 * 格式化显示状态
			 * @param status 要格式化的状态
			 */
			formantStatus(status) {
				let ns = this
				if(status == null || status == undefined) {
					return {label: ''}
				}
				for(let i = 0; i < ns.statusList.length; i++) {
					if(status == ns.statusList[i].value) {
						return ns.statusList[i]
					}
				}
				return {label: ''}
			},
			/**
			 * 确认录用应聘人员
			 * @param 要录用的应聘人员兑现
			 */
			confirmWorkerPass(worker) {
				let ns = this
				ns.$confirm('是否录用该人员为公司员工？').then(_ => {
					ns.workerPass(worker)
				})
			},
			/**
			 * 录用应聘人员
			 * @param 要录用的应聘人员兑现
			 * @return {Promise<void>}
			 */
			async workerPass(worker) {
				let ns = this
				let {code, msg} = await request(ns, config.api.mineCompanyhelpRequirementWorkerPass, {id: worker.id}, 'POST', {}, true)
				if(code == 200) {
					ns.$message.success('操作成功')
					ns.getWorkers()
				} else {
					ns.$message.error(msg)
				}
			},
			/**
			 * 确认拒绝应聘人员
			 * @param 要拒绝的应聘人员兑现
			 */
			confirmWorkerReject(worker) {
				let ns = this
				ns.$confirm('您确定拒绝该人员不为公司员工？').then(_ => {
					ns.workerReject(worker)
				})
			},
			/**
			 * 拒绝应聘人员
			 * @return {Promise<void>}
			 */
			async workerReject(worker) {
				let ns = this
				let {code, msg} = await request(ns, config.api.mineCompanyhelpRequirementWorkerReject, {id: worker.id}, 'POST', {}, true)
				if (code == 200) {
					ns.$message.success('操作成功')
					ns.getWorkers()
				} else {
					ns.$message.error(msg)
				}
			}
		},
		mounted(){
			this.getRequirement()
			this.getWorkers()
		},
		activated() {
			this.getRequirement()
			this.getWorkers()
		},
		// 路由导航 - 从列表页进去不缓存
		beforeRouteEnter(to, from, next) {
			// console.log(from.name, to.name);
			if (from.name == 'companyMyRecruit' && to.name == 'companyRecruitWorkerList') {
				// to.meta.keepAlive = false;
				next(vm => {
					vm.statusType = 1;
					vm.getWorkers();
				});
			}else if(from.name == 'companyRecruitWorkerDetail' && to.name == 'companyRecruitWorkerList'){
				to.meta.keepAlive = true;
				next();
			}

		}
	}
</script>

<style scoped>
	.breadcrumb {
		margin: 20px 0;
	}

	.backBtn {
		border: 1px solid #eeeeee;
		white-space: nowrap;
		font-size: 12px;
		height: 30px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
	}

	.backBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 5px #EEEEEE;
	}

	.roomDiv {
		display: flex;
		justify-content: center;
	}

	.roomDiv .leftDiv {
		width: 200px;
		text-align: left;
	}

	.roomDiv .rightDiv {
		width: 800px;
		margin-left: 30px;
	}

	.requirementPost {
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		margin: 20px 0;
	}

	.titleDiv {
		/* border-bottom: 2px solid #045db9; */
		text-align: left;
		padding: 5px 0;
		font-size: 20px;
		font-weight: bold;
		color: #045db9;
		margin: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.msgDiv {
		margin-bottom: 50px;
	}

	.statusTypeBtnDiv {
		display: flex;
		font-size: 13px;
		border: 1px solid #eeeeee;
		border-bottom: 0;
		padding: 10px;
	}

	.statusTypeBtnDiv div {
		padding: 5px 10px;
		transition: all 0.2s ease 0s;
	}

	.statusTypeBtnDiv .selectBtn {
		background-color: #045db9;
		color: #FFFFFF;
	}

	.statusTypeBtnDiv div:hover {
		background-color: #045db9;
		color: #FFFFFF;
		cursor: pointer;
	}

	::v-deep .el-table tbody tr:hover > td {
		background-color: #FFFFFF !important
	}

	::v-deep .el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
		border-color: #eeeeee;
	}

	::v-deep .is-leaf {
		font-weight: normal;
	}

	::v-deep .el-table td, .el-table th {
		padding: 10px 0;
	}

	.rowBtn {
		text-decoration: underline;
		color: #045db9;
	}

	.rowBtn:hover {
		cursor: pointer;
	}

	.tableDiv {
		font-size: 13px;
		border: 1px solid #eeeeee;
		color: #666666;
		margin-bottom: 50px;
	}

	.tableDiv .rowDiv {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
	}

	.tableDiv .rowDiv .keyDiv {
		padding: 10px;
		background-color: #f4f4f4;
		width: 15%;
		text-align: left;
		flex-shrink: 0;
		width: 130px;
	}

	.tableDiv .rowDiv .valueDiv {
		padding: 10px;
		width: 85%;
		text-align: left;
		word-break: break-all;
	}

	#pageDiv {
		display: flex;
		justify-content: center;
	}

	#pageDiv #policyPagination {
		margin-bottom: 30px;
		width: 800px;
		text-align: right;
	}

	#selectTypeDiv {
		width: 100%;
		display: flex;
		border-bottom: 3px solid #D00000;
		padding: 0 20px;
	}

	#selectTypeDiv div {
		padding: 5px 20px;
		font-weight: bold;
	}

	#selectTypeDiv .selectType {
		background-color: #D00000;
		color: #FFFFFF;
	}

	#selectTypeDiv .btn:hover {
		background-color: #D00000;
		color: #FFFFFF;
		cursor: pointer;
		transition: all 0.2s ease 0s;
	}

	.layout {
		min-height: 100vh;
		position: relative;
		padding-bottom: 150px;
		box-sizing: border-box;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>
